import { Input } from "@arco-design/web-react";
import useFormContext from "@arco-design/web-react/es/Form/hooks/useContext";
import { IconClose, IconMore } from "@arco-design/web-react/icon";

interface TextSelectProps {
	text?: string;
	placeholder?: string;
	onSelect?: () => void;
	onClear?: () => void;
}

export default function TextSelect({
	text,
	placeholder,
	onSelect,
	onClear,
}: TextSelectProps) {
	const { disabled } = useFormContext();
	return (
		<Input
			value={text}
			placeholder={placeholder}
			readOnly
			disabled={disabled}
			suffix={
				disabled ? undefined : (
					<div className="flex items-center gap-[3px]">
						<IconClose
							onClick={onClear}
							className="cursor-pointer hidden hover:block"
						/>
						<IconMore onClick={onSelect} className="cursor-pointer" />
					</div>
				)
			}
		/>
	);
}
